.process-form{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    button{
        background: #fff;
    }
    &>div{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .grouping{
        position: relative;
        background: #fff;
        //&:before{
        //    content: '';
        //    display: block;
        //    height: 21px;
        //    width: 1px;
        //    background: #666;
        //    position: absolute;
        //    left: 50%;
        //    margin-left: -1px;
        //    top: -1px;
        //}

        &>div:hover{
            .node-control{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .node-control{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 24px;
        display: none;
        a{
            flex: 1;
            display: block;
            height: 24px;
            font-size: 14px;
            line-height: 24px;
            background: rgba(204,0,0,.8);
            color: #fff;
            &:last-of-type{
                border-left: 1px solid #fff;
            }
        }
    }

    .haveChild{
        //&:after{
        //    content: '';
        //    display: block;
        //    width: 1px;
        //    height: 20px;
        //    background: #666;
        //    left: 50%;
        //    margin-left: -1px;
        //    position: absolute;
        //    bottom: 0px;
        //}
    }

    .process-group{
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        position: relative;
        //&:before{
        //    content: '';
        //    display: block;
        //    background: #666;
        //    width: calc(~"100% - 179px");
        //    height: 1px;
        //    top: -21px;
        //    left: 89px;
        //    position: absolute;
        //}
        &>div{
            position: relative;
            width: 180px;
            //&:before{
            //    content: '';
            //    display: block;
            //    height: 20px;
            //    width: 1px;
            //    background: #666;
            //    position: absolute;
            //    left: 50%;
            //    margin-left: -1px;
            //    top: -20px;
            //}
            &>div{
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }
    }
    .group-container{
        margin: 20px 15px 21px 15px;
        border: 1px solid #666;
        padding: 10px;
        position: relative;
        //&:before{
        //    content: '';
        //    display: block;
        //    height: 20px;
        //    width: 1px;
        //    background: #666;
        //    position: absolute;
        //    left: 50%;
        //    margin-left: -1px;
        //    top: -21px;
        //}
        //&:after{
        //    content: '';
        //    display: block;
        //    height: 22px;
        //    width: 1px;
        //    background: #666;
        //    position: absolute;
        //    left: 50%;
        //    margin-left: -1px;
        //    bottom: -22px;
        //}
    }
    //.group-node{
    //    position: relative;
    //    margin-top: 40px;
    //    height: 50px;
    //    &:before{
    //        content: '';
    //        display: block;
    //        width: 1px;
    //        height: 40px;
    //        background: #666;
    //        position: absolute;
    //        top: -40px;
    //        left: 50%;
    //        margin-left: -1px;
    //    }
    //    &:hover{
    //        .node-control{
    //            display: flex;
    //            flex-direction: row;
    //            justify-content: center;
    //            align-items: center;
    //            text-align: center;
    //        }
    //    }
    //    &.noLine{
    //        margin-top: 20px;
    //    }
    //    &.noLine:before{
    //        display: none;
    //    }
    //    a.add-node{
    //        display: block;
    //        width: 12px;
    //        height: 12px;
    //        background: #cc0000;
    //        border-radius: 50%;
    //        position: absolute;
    //        left: 50%;
    //        bottom: -7px;
    //        text-align: center;
    //        color: #fff;
    //        font-size: 12px;
    //        z-index: 9;
    //        line-height: 11px;
    //        margin-left: -5px;
    //    }
    //}
}
.lcbz{
    border:1px solid #dadada;
    width: 100%;
    min-width: 1440px;
    overflow: hidden;
    .left_com{
        width: 160px;
        float:left;
        border-right: 1px solid #e8e8e8;
        li{
            text-align: center;
            height: 90px;
            line-height: 90px;
            .cj{
                width: 88px;
                height: 38px;
                border:1px dashed #5aeee5;
            }
            .ljfz{
                width: 96px;
                height: 58px;
                border:none
            }
            .sjhg{
                width: 88px;
                height: 38px;
                border:1px dashed #5aeee5;
                transform: skew(-20deg);
                span{
                    display: block;
                    transform: skew(20deg);
                }
            }
            .kjd{
                width: 88px;
                height: 38px;
                border:1px dashed #5aeee5;
                border-radius: 0;
            }
        }
    }
    .right_com{
        float: left;
        width: calc(~"100% -" 160px);
        height: 100%;
        min-height: 617px;
        max-height: 617px;
        position: relative;
        .scroll{
            width: 100%;
            height: 600px;
            overflow-y: auto;
            position: absolute;
            left: 0;
            top:18px;
        }
        .node_group{
            position: absolute;
            left: 50%;
            top:50px;
            margin-left:-50px;
            .cj{
                background: #fff;
                width: 120px;
                height: 60px;
                border:1px dashed #5aeee5;
                border-radius:5px;
            }

            .group_node{
                position: relative;
                margin-bottom:40px;
                .bj{
                    position: absolute;
                    right: -20px;
                    top: 10px;
                    a{
                        display: block;
                    }
                }
                &:before{
                    content: '';
                    display: block;
                    width: 0;
                    height: 40px;
                    border-right: 1px dashed #5aeee5 ;
                    position: absolute;
                    top: -40px;
                    left: 50%;
                    margin-left: -1px;
                }
                &.noLine:before{
                    display: none;
                }
            }
        }

    }
}
